'use strict'
import React, {Component} from 'react';
import $ from 'jquery';

class Slide extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            error: null,
            data: null
        };
    }
    componentDidMount() {
        $.getJSON('../webapp/data/slide.json').then(
            value => {
                this.setState({loading: false, data: value});
                $('.carousel').carousel();
            },
            error => this.setState({loading: false, error: error}));
    }
    render() {
        if(this.state.loading) {
            return <div>Loding...</div>;
        }
        else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
        }
        else {
            var data = this.state.data,
                slides = data.slides;
            var slideContent = <div className="carousel slide" id="mallSlide" data-ride="carousel">
                <ol className="carousel-indicators">
                    {
                        slides.map(function(item, idx) {
                            var navActiveClass = '';
                            if (idx == 0) {
                                navActiveClass = 'active';
                            }
                            return <li data-target="#mallSlide" data-slide-to={idx} className={navActiveClass} key={idx}></li>;
                        })
                    }
                </ol>
                <div className="carousel-inner" role="listbox">
                    {
                        slides.map(function(item, idx) {
                            var itemActiveClass = 'item';
                            if (idx == 0) {
                                itemActiveClass = 'item active';
                            }
                            return <div className={itemActiveClass} key={idx}><img src={item.url} /></div>;
                        })
                    }
                </div>
            </div>;
            return (<div className="slide-wrapper">{slideContent}</div>);
        }
    }
}

export default Slide;